<script setup>
import {ref, watch} from "vue"

const props = defineProps({
  visible: Boolean,
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  }
})


const emits = defineEmits(['update:visible', 'close'])

const size = ref(70)
const rotate = ref(0)
let time;

const updateSize = () => {
  size.value += generateRandomNumber()
  if (size.value >= 200) {
    clearInterval(time)
    time = setInterval(updateSmallSize, 36)
  }
}

const updateSmallSize = () => {
  size.value -= generateRandomNumber(20, 10)
  if (size.value <= 70) {
    emits('update:visible', false)
    emits('close')
    clearInterval(time)
  }
}


const upSize = () => {
  rotate.value = generateRandomNumber(-70, 70)
  time = setInterval(updateSize, 16)
}

const generateRandomNumber = (max = 16, min = 8) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

watch(() => props.visible, (value) => {
  if (value) upSize()
})


</script>

<template>
  <div
      class="absolute z-[9999] box" v-if="visible"
      :style="{'--x': x + 'px', '--y':  y + 'px', '--r': rotate + 'deg'}"
  >
    <van-icon name="like" :size="size" color="red"/>
  </div>
</template>

<style scoped lang="scss">
.box {
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%) rotate(var(--r));
}
</style>
